<template>
  <div class="attraction-view">
    <div class="container">
      <div class="sidebar">
        <h2>旅游地区</h2>
        <ul class="attraction-list">
          <li v-for="attraction in attractions" :key="attraction.id" @mouseover="highlightAttraction(attraction)" @mouseout="unhighlightAttraction()">
            <span :class="{ 'highlighted': attraction.highlighted }">{{ attraction.name }}</span>
            <span class="sub-attractions" v-if="attraction.subAttractions">{{ attraction.subAttractions.join(', ') }}</span>
          </li>
        </ul>
      </div>
      <div class="carousel-container">
        <div class="feature-modules">
          <div class="module" v-for="module in featureModules" :key="module.id" @mouseover="highlightModule(module)" @mouseout="unhighlightModule(module)">
            <i :class="module.icon"></i> {{ module.name }}
          </div>
        </div>
        <div class="carousel">
          <div class="carousel-inner">
            <transition name="fade">
              <img :src="currentImage" :alt="images[currentIndex].description" key="currentIndex" />
            </transition>
          </div>
          <button class="prev" @click="prevImage">❮</button>
          <button class="next" @click="nextImage">❯</button>
          <div class="indicator-container">
            <span v-for="(image, index) in images" :key="index" class="indicator" :class="{ active: index === currentIndex }" @click="showImage(index)"></span>
          </div>
          <div class="description">{{ currentDescription }}</div>
        </div>
      </div>
    </div>
    <div class="comments-section">
      <h2>评论</h2>
      <ul class="comments-list">
        <li v-for="comment in comments" :key="comment.id" class="comment">
          <strong>{{ comment.user }}</strong>: {{ comment.text }}
        </li>
      </ul>
      <form @submit.prevent="addComment">
        <textarea v-model="newCommentText" placeholder="写下你的评论..." required></textarea>
        <button type="submit" class="submit-button">提交</button>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import { useIntervalFn } from '@vueuse/core';

const images = [
  { src: require('@/assets/应县木塔.jpg'), description: '美丽的风景1' },
  { src: require('@/assets/云冈石窟.jpg'), description: '壮观的风景2' },
  { src: require('@/assets/悬空寺.jpg'), description: '迷人的风景3' },
  { src: require('@/assets/五台山.jpg'), description: '迷人的风景3' },
  { src: require('@/assets/三清山.jpg'), description: '迷人的风景3' },
  { src: require('@/assets/九寨沟.jpg'), description: '迷人的风景3' },
];

const currentIndex = ref(0);
const isLiked = ref(false);
const likeCount = ref(0);
const comments = ref([
  { id: 1, user: '张三', text: '这个地方真是太美了！' },
]);
const newCommentText = ref('');
const attractions = ref([
  { id: 1, name: '北京', subAttractions: ['天安门', '故宫', '长城'], highlighted: false },
  { id: 2, name: '山西', subAttractions: ['应县木塔', '云冈石窟', '悬空寺'], highlighted: false },
  { id: 3, name: '云南', subAttractions: ['丽江', '大理', '西双版纳'], highlighted: false },
  { id: 4, name: '江南', subAttractions: ['西湖', '乌镇', '周庄'], highlighted: false },
  { id: 5, name: '四川', subAttractions: ['九寨沟', '峨眉山', '都江堰'], highlighted: false },
  { id: 6, name: '青岛', subAttractions: ['栈桥', '八大关', '崂山'], highlighted: false },
  { id: 7, name: '江西', subAttractions: ['庐山', '龙虎山', '三清山'], highlighted: false },
  { id: 8, name: '上海', subAttractions: ['外滩', '东方明珠', '迪士尼乐园'], highlighted: false },
  { id: 9, name: '湖南', subAttractions: ['张家界', '凤凰古城', '岳麓山'], highlighted: false }
]);
const featureModules = ref([
  { id: 1, name: '美食', icon: 'fas fa-utensils', highlighted: false },
  { id: 2, name: '游记', icon: 'fas fa-book', highlighted: false },
  { id: 3, name: '当地向导', icon: 'fas fa-map-marked-alt', highlighted: false },
  { id: 4, name: '旅游度假', icon: 'fas fa-suitcase', highlighted: false }
]);

const currentImage = computed(() => images[currentIndex.value].src);
const currentDescription = computed(() => images[currentIndex.value].description);

const showImage = (index) => {
  currentIndex.value = index;
};

const nextImage = () => {
  currentIndex.value = (currentIndex.value + 1) % images.length;
};

const prevImage = () => {
  currentIndex.value = (currentIndex.value - 1 + images.length) % images.length;
};

const toggleLike = () => {
  isLiked.value = !isLiked.value;
  if (isLiked.value) {
    likeCount.value++;
  } else {
    likeCount.value--;
  }
};

const addComment = () => {
  const newComment = {
    id: Date.now(),
    user: '游客',
    text: newCommentText.value
  };
  comments.value.push(newComment);
  newCommentText.value = '';
};

const highlightAttraction = (attraction) => {
  attractions.value.forEach(a => (a.highlighted = false));
  attraction.highlighted = true;
};

const unhighlightAttraction = () => {
  attractions.value.forEach(a => (a.highlighted = false));
};

const highlightModule = (module) => {
  featureModules.value.forEach(m => (m.highlighted = false));
  module.highlighted = true;
};

const unhighlightModule = (module) => {
  module.highlighted = false;
};

// 自动播放轮播图
const { pause, resume } = useIntervalFn(() => {
  nextImage();
}, 3000, { immediate: true });

onMounted(resume);
onBeforeUnmount(pause);
</script>

<style scoped>
/* 保留原有的样式 */
.attraction-view {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.sidebar {
  width: 250px;
  margin-right: 20px;
  text-align: left;
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.attraction-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.attraction-list li {
  margin: 10px 0;
  cursor: pointer;
  transition: transform 0.3s, color 0.3s;
  position: relative;
  padding-left: 10px;
}

.attraction-list li span {
  font-size: 36px;
  transition: color 0.3s;
}

.attraction-list li .sub-attractions {
  font-size: 14px;
  color: #777;
  margin-left: 10px;
}

.attraction-list li:hover span {
  transform: scale(1.2);
  color: blue;
}

.carousel-container {
  width: 900px;
  position: relative;
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.feature-modules {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 5px;
}

.module {
  display: flex;
  align-items: center;
  font-size: 18px;
  cursor: pointer;
  transition: color 0.3s;
}

.module i {
  margin-right: 5px;
}

.module:hover {
  color: blue;
}

.carousel {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
  margin-bottom: 20px;
}

.carousel-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 10;
}

.prev { left: 10px; }
.next { right: 10px; }

.indicator-container {
  text-align: center;
  margin-top: 10px;
}

.indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #bbb;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}

.indicator.active {
  background-color: #717171;
}

.description {
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
  color: #555;
}

.comments-section {
  margin-top: 20px;
  background-image: url('@/assets/评论背景.jpg');
  background-size: cover;
  background-position: center;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.comments-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comment {
  margin: 10px 0;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #ddd;
  border-radius: 5px;
}

form {
  margin-top: 20px;
  display: flex;
  align-items: flex-end;
}

textarea {
  width: calc(100% - 110px);
  height: 100px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: none;
}

.submit-button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 10px;
  position: relative;
  top: -10px;
}

.submit-button:hover {
  background-color: #0056b3;
}

.highlighted {
  color: #ff4500;
}
</style>